<template>

  <el-card>
    <el-row>

      <el-col :span="4">
        <div class="birthdayHum">
          <span>人员</span>
        </div>
        <div class="birthdayNum">
          <span style="color:#3A9E76">{{totalStatistic.userNum}}</span><span class="birthdayNumHum"></span>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="birthdayHum">
          <span>网址</span>
        </div>
        <div class="birthdayNum">
          <span style="color:#D06000">{{totalStatistic.webNum}}</span><span class="birthdayNumHum"></span>
        </div>
      </el-col>

      <el-col :span="3">
        <div class="birthdayHum">
          <span>书籍</span>
        </div>
        <div class="birthdayNum">
          <span style="color:#7671B5">{{totalStatistic.bookNum}}</span><span class="birthdayNumHum"></span>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="birthdayHum">
          <span>音乐</span>
        </div>
        <div class="birthdayNum">
          <span style="color:#DD298C">{{totalStatistic.musicNum}}</span><span class="birthdayNumHum"></span>
        </div>
      </el-col>

      <el-col :span="3">
        <div class="birthdayHum">
          <span>软件</span>
        </div>
        <div class="birthdayNum">
          <span style="color:#6DA700">{{totalStatistic.softwareNum}}</span><span class="birthdayNumHum"></span>
        </div>
      </el-col>

      <el-col :span="3">
        <div class="birthdayHum">
          <span>游戏</span>
        </div>
        <div class="birthdayNum">
          <span style="color:#E0AD00">{{totalStatistic.gameNum}}</span><span class="birthdayNumHum"></span>
        </div>
      </el-col>

      <el-col :span="3">
        <div class="birthdayHum">
          <span>购物</span>
        </div>
        <div class="birthdayNum">
          <span style="color:#A2770E">{{totalStatistic.shoppingCartNum}}</span><span class="birthdayNumHum"></span>
        </div>
      </el-col>

    </el-row>

  </el-card>

</template>

<script>

  import http from '@/utils/http'

  export default {
    name: "DataStatistic",
    data(){
      return {
        // 统计总数
        totalStatistic: {
          userNum: 0,
          webNum: 0,
          bookNum: 0,
          musicNum: 0,
          softwareNum: 0,
          gameNum: 0,
          shoppingCartNum: 0,
        }
      }
    },
    methods: {
      /**
       * 统计当前人员的一些收藏数量
       */
      getDataStatistic(){
        http.get("/home/getDataStatistic", {
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
            this.totalStatistic = res.data
          }

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getDataStatistic()
    }
  }
</script>

<style scoped>

  .birthdayHum {
    margin: 5px;
    font-weight: 400;
    font-size: 14px;
    color: #909399;
    text-align: center
  }

  .birthdayNum {
    /*margin: 5px;*/
    font-weight: 700;
    font-size: 23px;
    /*color: #909399;*/
    text-align: center
  }

  .birthdayNumHum {
    /*margin: 5px;*/
    /*font-weight: 700;*/
    font-size: 14px;
    /*color: #909399;*/
    /*text-align: center*/
  }

</style>
